// Simple shimmer
$textColor: #00A4B6;
@keyframes shimmer {
  0% {
    transform: translateX(-300%);
  }

  100% {
    transform: translateX(300%);
  }
}

.shimmering-text {
  position: relative;
  .shimmering-text-dot {
    display: none;
  }
  &.gemstone {
    font-family: $notoSans;
    font-size: 12px;
    .shimmering-text-dot {
      display: inline-block;
      position: relative;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 6px;
      height: 6px;
      background: $textColor;
      border-radius: 100%;
      margin-right: 11px;
      &::after {
        content: "";
        display: block;
        position: absolute;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;
        width: 11px;
        height: 11px;
        border: 1px solid $textColor;
        border-radius: 100%;
        opacity: 0;
        :global {
          animation: 1.6s infinite birthstone-text ease-out;
        }
      }
    }
  }
}

.shimmer {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(255, 255, 255, 0) 70%
  );

  //animation: shimmer 3.6s linear infinite;
}
